<template>
  <div class="shopcar-container">
    <div class="goods-list">
      <!-- 商品列表项区域 -->
      <div class="mui-card" v-for="(item,i) in goodslist" :key="item.id">
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
            <mt-switch 
             v-model="$store.getters.getGoodsSelected[item.id]"
             @change="selectedChanged(item.id, $store.getters.getGoodsSelected[item.id])"></mt-switch>
            <img :src="item.img_url" alt="" >
            <div class="info">
              <h1>{{ item.title }}</h1>
              <p>
                <span class="price">￥{{ item.sell_price }}</span>
                <numbox :initcount="$store.getters.getGoodsCount[item.id] " :goodsid="item.id"></numbox>
                <!-- 
                  问题：如何从购物车中获取商品的数量呢？
                  思路：我们可以先创建一个空对象，然后循环购物车中所有商品的数据，把当前循环
                  这条商品的Id，作为对象的属性名，count值作为对象的属性值，这样，当把所有的
                  商品循环一遍，就会得到一个对象： {88:1, 89:1, 90:4}
                 -->
                <a href="#" @click.prevent="remove(item.id, i)">删除</a>
              </p>
            </div>
          
          </div>
        </div>
      </div>

      <!-- 结算区域 -->
      <div class="mui-card">
        <div class="mui-card-content">
          <div class="mui-card-content-inner jiesuan">
            <div class="left">
              <p>总计(不含运费)</p>
              <p>已勾选商品 <span class="red">{{ $store.getters.getGoodsCountAndAmount.count }}</span> 件，
              总价 ￥<span class="red">{{ $store.getters.getGoodsCountAndAmount.amount }}</span></p>
            </div>
            <mt-button type="danger">去结算</mt-button>
          </div>
        </div>
      </div>

      <p>{{ $store.getters.getGoodsSelected }}</p>



    </div>
  </div>
</template>

<script>
  import numbox from '../subcomponents/shopcar-numbox.vue'

  export default {
    data(){
      return {
        goodslist: []  //购物车中所有商品数据
      }
    },
    created(){
      this.getGoodsList()
    },
    methods:{
      getGoodsList(){
        // 获取到store中所有的商品的Id,然后拼接出一个用逗号分隔的字符串
        var idArr = []
        this.$store.state.car.forEach(item => {
          idArr.push(item.id)
        });
        // 如果购物车中没有商品，则直接返回，否则报错
        if(idArr.length<=0){
          return;
        }
       
        // 获取购物车商品列表
        /* this.$http.get('/api/goods/getshopcarlist/' + idArr.join(',')).then(result=>{
          if(result.body.status === 0){
            this.goodslist = result.body.message
          }
        }) */

        // 模拟数据：从GoodsInfo.vue中拿到本地存储的商品列表信息，并根据Id来筛选对应的商品放到goodslist中
         var goods = JSON.parse(localStorage.getItem('GoodsList') || '[]')
         if(goods.length > 0){
           goods.forEach(item=>{
             idArr.some(iditem=>{
               if(item.id == iditem){
                 this.goodslist.push(item)
               }
             })
           })
         }
      },
      remove(id, index){
        // 点击删除，把商品从store中根据传递Id删除，同时把当前组件中goodslist对应的商品使用index删除
        this.goodslist.splice(index, 1);
        this.$store.commit("removeFromCar", id);
      },
      selectedChanged(id, val){
        // 每当点击开关，把最新的开关状态同步到store中
        // console.log(id + '--------------' + val)
        this.$store.commit("updateGoodsSelected", {id:id, selected:val });
      }
    },
    components:{
      numbox
    }
  }

</script>

<style lang="scss" scoped>
.shopcar-container {
  background-color: #eee;
  overflow: hidden;
  .goods-list {
    .mui-card-content-inner {
      display: flex;
      align-items: center;  //图片剧中
    }
    img {
      width: 60px;
      height: 60px;
    }
    h1 {
      font-size: 13px;
    }
    .info{
      p{
        margin-top: 10px;
        margin-bottom: 0;
      }
      .price {color: red; font-weight: bold;}
    }
  }
  .jiesuan {
    display: flex;
    justify-content: space-between;
    align-items: center;  //纵向居中
    .red {
      color:red;
      font-weight: bold;
      font-size: 16px;
    }
  }
}
</style>
